<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="token&&isLogin">
			<view class="h45">
				<view class="fix-wrap">
					<view class="tab-bar">
						<view :class="['item',{'active':tab==1}]" @click="changeTab(1)">
							<view class="name">性诱测报</view>
						</view>
						<view :class="['item',{'active':tab==2}]" @click="changeTab(2)">
							<view class="name">实蝇测报</view>
						</view>
						<view :class="['item',{'active':tab==3}]" @click="changeTab(3)">
							<view class="name">天牛测报</view>
						</view>
					</view>
				</view>
			</view>

			<view class="body">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<!-- 性诱测报 -->
					<template v-if="tab==1">
						<template v-if="list.xy.length>0">
							<view class="list-wrap">
								<view class="item" v-for="(item,index) in list.xy" :key="index">
									<view class="name-bar">
										<view v-if="item.status==0" class="status s-1">已过期</view>
										<view v-else class="status s-2">即将过期</view>
										<view class="name split">{{item.name}}</view>
									</view>
									<navigator
										:url="'/package_common/attractant/attractant?type=detail&dev_name='+item.name+'&dev_id='+item.data_device_id+'&dev_type=1'"
										hover-class="none" class="btn ">查看详情</navigator>
								</view>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
						<empty v-else msg="当前没有引诱剂过期设备"></empty>
					</template>

					<!-- 实蝇测报 -->
					<template v-if="tab==2">
						<template v-if="list.sy.length>0">
							<view class="list-wrap">
								<view class="item" v-for="(item,index) in list.sy" :key="index">
									<view class="name-bar">
										<view v-if="item.status==0" class="status s-1">已过期</view>
										<view v-else class="status s-2">即将过期</view>
										<view class="name split">{{item.name}}</view>
									</view>
									<navigator
										:url="'/package_common/attractant/attractant?type=detail&dev_name='+item.name+'&dev_id='+item.data_device_id+'&dev_type=8'"
										hover-class="none" class="btn ">查看详情</navigator>
								</view>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
						<empty v-else msg="当前没有引诱剂过期设备"></empty>
					</template>

					<!-- 天牛测报 -->
					<template v-if="tab==3">
						<template v-if="list.tn.length>0">
							<view class="list-wrap">
								<view class="item" v-for="(item,index) in list.tn" :key="index">
									<view class="name-bar">
										<view v-if="item.status==0" class="status s-1">已过期</view>
										<view v-else class="status s-2">即将过期</view>
										<view class="name split">{{item.name}}</view>
									</view>
									<navigator
										:url="'/package_common/attractant/attractant?type=detail&dev_name='+item.name+'&dev_id='+item.data_device_id+'&dev_type=12'"
										hover-class="none" class="btn ">查看详情</navigator>
								</view>
							</view>
							<loading :loadingState="loadingState"></loading>
						</template>
						<empty v-else msg="当前没有引诱剂过期设备"></empty>
					</template>

				</template>
			</view>
		</template>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import loading from '@/components/loading-more.vue'
	export default {
		name: '',
		data() {
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				isLogin:false,
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				tab: 1,
				list: {},
				loadingState: {
					default: true,
					completed: false
				}
			}
		},
		async onLoad(params) {
			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.getAttractantList();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			} 
		},
		async onShow() {

			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.getAttractantList();
				this.loginStateUpdate = false;
			}

			if (!this.token&&!this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}



		},
		methods: {

			changeTab: function(type) {
				this.tab = type;
			},

			// 获取过期引诱剂
			getAttractantList: async function() {
				let res = await this.$api.tool_api.getAttractantList({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid
				})
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					this.loadingState.completed = true;

					res.data.data.tn.forEach(item => {
						if (Number(item.num) > 0) {
							item.status = 1; // 即将过期
						} else {
							item.status = 0; // 已过期
						}
					})
					res.data.data.xy.forEach(item => {
						if (Number(item.num) > 0) {
							item.status = 1; // 即将过期
						} else {
							item.status = 0; // 已过期
						}
					})
					res.data.data.sy.forEach(item => {
						if (Number(item.num) > 0) {
							item.status = 1; // 即将过期
						} else {
							item.status = 0; // 已过期
						}
					})

					this.list = res.data.data;
					console.log(this.list)
				}
			}

		},
		computed: {
			yyjUpdate() {
				return this.$store.state.yyjUpdate;
			}
		},
		watch: {
			async yyjUpdate(newer, older) {
				if (newer) {
					this.getAttractantList();
				}
			}
		},
		components: {
			empty,
			loading
		},
	}
</script>

<style lang="less">
	.list-wrap {
		margin: 20rpx 0;
		background: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 20rpx 30rpx 0;

			border-bottom: 2rpx solid #eee;
			margin-left: 20rpx;
			font-size: 30rpx;

			.name-bar {
				display: flex;

				.name {
					max-width: 85%;
				}
			}

			.status {
				flex-shrink: 0;
				padding: 2rpx 5rpx;
				margin-right: 10rpx;
				background: #f00;
				border-radius: 8rpx;
				color: #fff;
				font-size: 24rpx;
			}

			.s-2 {
				background: #ff9600;
			}

			.name {}

			.btn {
				flex-shrink: 0;
				color: #09f;
			}
		}
	}

	.tab-bar {
		display: flex;

		.item {
			display: flex;
			justify-content: center;
			width: 1%;
			flex-grow: 1;
			line-height: 45px;
			text-align: center;
			font-size: 30rpx;
			color: #666;

			.name {}
		}

		.active {
			.name {
				line-height: 42px;
				color: #000;
				font-weight: bold;
				border-bottom: 3px solid #09f;
			}
		}
	}
</style>
